<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<style>
			body {
				background-color: #ffffff;
			}
		</style>
	</head>
	<body>


		<div class="layui-card">
			<!--  <div class="layui-card-header"><i class="fa fa-desktop"></i>版本信息</div> -->
			<div class="layui-card-body layui-text">
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col>
					</colgroup>
					<tbody>
						<tr>
							<td>主机ip</td>
							<td id="ip"></td>
						</tr>
						<tr>
							<td>主机名称</td>
							<td id="computerRemark"></td>
						</tr>
						<tr>
							<td>系统架构</td>
							<td id="osArch"></td>
						</tr>
						<tr>
							<td>操作系统</td>
							<td id="osName"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>



		<div class="layui-card">
			<div class="layui-card-header"><i class="fa fa-desktop"></i>硬盘信息</div>
			<div class="layui-card-body layui-text">
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col>
					</colgroup>
					<tbody>
						<tr>
							<td>可用空间</td>
							<td id="free"></td>
						</tr>
						<tr>
							<td>已用空间</td>
							<td id="used"></td>
						</tr>
						<tr>
							<td>总空间</td>
							<td id="total"></td>
						</tr>
						<tr>
							<td>使用率</td>
							<td id="usage"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>


		<div class="layui-card">
			<div class="layui-card-header"><i class="fa fa-desktop"></i>cpu信息</div>
			<div class="layui-card-body layui-text">
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col>
					</colgroup>
					<tbody>
						<tr>
							<td>cpu使用率</td>
							<td id="csys"></td>
						</tr>

					</tbody>
				</table>
			</div>
		</div>


		<div class="layui-card">
			<div class="layui-card-header"><i class="fa fa-desktop"></i>内存信息</div>
			<div class="layui-card-body layui-text">
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col>
					</colgroup>
					<tbody>
						<tr>
							<td>可用内存</td>
							<td id="cpuFree"></td>
						</tr>
						<tr>
							<td>已用内存</td>
							<td id="cpuUsed"></td>
						</tr>
						<tr>
							<td>总内存</td>
							<td id="cpuTotal"></td>
						</tr>
						<tr>
							<td>使用率</td>
							<td id="cpuUsagerate"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>



		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js" charset="utf-8"></script>

		<script>
			layui.use(['jquery', 'form', 'table', 'http'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					http = layui.http;

				var computerIp = getQueryString("ip")

				$('#ip').append(computerIp);

				//查询最新主机信息

				$.ajax({
					type: "post",
					async: false,
					url: http.api + 'sys/selectNewSysinfo',
					data: "computerIp=" + computerIp,
					dataType: "json",
					success: function(response) {


						$('#computerRemark').append(response.data.computerRemark);
						$('#osArch').append(response.data.osArch);
						$('#osName').append(response.data.osName);

					},
					error: function(e) {
						console.log(data)
						alert("请求异常。");
					}
				});







				//查询最新cpu信息

				$.ajax({
					type: "post",
					async: false,
					url: http.api + 'sys/selectNewCpuinfo',
					data: "computerIp=" + computerIp,
					dataType: "json",
					success: function(response) {

						$('#csys').append(response.data.csys + '%');

					},
					error: function(e) {
						console.log(data)
						alert("请求异常。");
					}
				});


				//查询最新内存信息

				$.ajax({
					type: "post",
					async: false,
					url: http.api + 'sys/selectNewMeminfo',
					data: "computerIp=" + computerIp,
					dataType: "json",
					success: function(response) {

						$('#cpuFree').append(response.data.free);
						$('#cpuUsed').append(response.data.used + 'G');
						$('#cpuTotal').append(response.data.total + 'G');
						$('#cpuUsagerate').append(response.data.usagerate * 100 + '%');

					},
					error: function(e) {
						console.log(data)
						alert("请求异常。");
					}
				});


				//查询最新硬盘信息

				$.ajax({
					type: "post",
					async: false,
					url: http.api + 'sys/selectNewSysfileinfo',
					data: "computerIp=" + computerIp,
					dataType: "json",
					success: function(response) {
						$('#free').append(response.data.free + 'G');
						$('#used').append(response.data.used + 'G');
						$('#total').append(response.data.total + 'G');
						$('#usage').append(response.data.usage * 100 + '%');


					},
					error: function(e) {
						console.log(data)
						alert("请求异常。");
					}
				});


				function getQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					if (r !== null)
						return unescape(r[2]);
					return null;
				}


			});
		</script>
	</body>
</html>
